<template>
    <div style="height: 100%;">
        <el-input v-model="filterText" size="small" :placeholder="placeholder" clearable style="margin-bottom:10px;width:90%" />
        <el-tree ref="tree"
                 :node-key="nodekey"
                 :data="organizationUnits"
                 :props="defaultProps"
                 :filter-node-method="filterNode"
                 :expand-on-click-node="expandOnClickNode"
                 draggable
                 highlight-current
                 :allow-drop="allowDrop"
                 :allow-drag="allowDrag"
                 :default-expand-all="expandAll"
                 :default-expanded-keys="expandKeys"
                 @node-expand="handleExpand"
                 @node-drag-start="handleDragStart"
                 @node-drag-enter="handleDragEnter"
                 @node-drag-leave="handleDragLeave"
                 @node-drag-over="handleDragOver"
                 @node-drag-end="handleDragEnd"
                 @node-click="handleNodeClick"
                 @node-drop="handleDrop">
            <div slot-scope="scope" style="display: flex; max-width: 90%; align-items: center; ">
                <!-- <el-tooltip class="item" effect="dark" :open-delay="500" :content="scope.data.orgCode" placement="bottom-end"> -->
                <div :title="scope.data.chapterName" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap ">
                    <span>
                        <i :class="scope.data.beid ? scope.data.parentID?'el-icon-odometer':'el-icon-copy-document' : 'el-icon-folder-opened'" />
                            <span :style="{'color':scope.data.isNew? 'red' :'' }" class="vice-node"> {{ scope.data[showLabelName] }}</span>
                            <span v-if="showDesc !== '' && scope.data[showDesc]" class="vice-node">({{ scope.data[showDesc] }})</span>
                            <!--<span v-show="showNumber && scope.data.NUMBER" class="vice-node" style="font-size: 12px;font-weight: 600;">（{{ scope.data.NUMBER }}人）</span>-->
                    </span>
                </div>
                <div>
                    <el-dropdown v-show="showMenu" trigger="hover" placement="bottom-start" size="medium" @command="handleCommand">
                        <span class="el-dropdown-link"><i class="el-icon-caret-bottom" /></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,index) in treeMenus"
                                              v-show="showMenuItem(scope, item)"
                                              :key="index"
                                              :command="{command:item.value,data:scope}">
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!--<div v-if="scope.data.showNode" :id="scope.data[nodekey]"
         class="dragToArea marginL10"
         style="padding: 0px 10px"
         @dragenter.stop="dragenter($event, scope.data[nodekey])"
         @dragleave.stop="dragleave($event, scope.data[nodekey])">
        {{showLabel}}
    </div>-->
                <!-- </el-tooltip> -->
            </div>
        </el-tree>
        <div class="dragToArea marginL10"
             style="text-align: center; "
             v-if ="permitEdit"
             @click="addEquipSystem()">
            新增系统
        </div>
        <!--<el-divider></el-divider>
    <div class="dragToArea marginL10"
         style="text-align: center; padding: 20px 10px"
         @dragenter.stop="dragenter2($event)"
         @dragleave.stop="dragleave2($event)">
        拖至末尾
    </div>-->
    </div>
</template>
<script>
export default {
    name: 'DragInsertTree',
    props: {
        data: { type: Array, default: null },
        hasChildCanAdd: { type: Boolean, default: false },
        treeMenus: { type: Array, default: null },
        orgData: { type: Array, default: null },
        expandAll: { type: Boolean, default: false },
        expandOnClickNode: { type: Boolean, default: true },
        placeholder: { type: String, default: '输入节点名称进行过滤' },
        nodekey: { type: String, default: 'id' },
        parentKey: { type: String, default: 'parentID' },
        showLabelName: { type: String, default: 'name' },
        showDesc: { type: String, default: '' },
        showMenu: { type: Boolean, default: true },
        showNumber: { type: Boolean, default: false },
        showLabel: { type: String, default: ' 拖至此章节下' },
        permitEdit: { type: Boolean, default: false },
        permitDownload: { type: Boolean, default: false },
    },
    data() {
        return {
            filterText: '',
            organizationUnits: [],
            defaultProps: {
                children: 'children',
                label: 'displayName'
            },
            expandKeys: [],
            selectTreeID: '',
            orrTreeID: 0,
        };
    },
    watch: {
        data(val) {
            this.organizationUnits = this.toTree(val, null);
            if (this.organizationUnits.length > 0) {
                var ter = this.getAllShowNodes(this.organizationUnits);
                ter.map(x => {
                    x.showNode = true;
                    return x;
                });
            }
        },
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        orgData(val) {
            his.organizationUnits = this.orgData;
        }
    },
    mounted() {},
        methods: {
            getAllShowNodes(node = [], arr = []) {
                for (let item of node) {
                    if (!item.beid && item.children.length === 0) { arr.push(item) };
                    let parentArr = [];
                    if (item.children) parentArr.push(...item.children);
                    if (parentArr && parentArr.length) this.getAllShowNodes(parentArr, arr);
                };
                return arr
            },
            getAllNodes(node = [], arr = []) {
                for (let item of node) {
                    arr.push(item);
                    let parentArr = [];
                    if (item.children) parentArr.push(...item.children);
                    if (parentArr && parentArr.length) this.getAllNodes(parentArr, arr);
                };
                return arr
            },
        toTree(nodeList, parentID) {
            var nodes = nodeList.filter(item => { return item[this.parentKey] === parentID });
            if (nodes.length > 0) {
                nodes.forEach(item => {
                    if (item[this.nodekey]) {
                        var children = this.toTree(nodeList, item[this.nodekey]);
                        item.children = children;
                    };
                });
            };
            return nodes;
            },
            addEquipSystem() {
                this.$emit('addEquit')
            },
        handleExpand(data, node, row) {
            this.expandKeys.push(data.id);
        },
        handleCommand(obj) {
            this.$emit('command', obj);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data[this.showLabelName].indexOf(value) !== -1;
        },
        handleNodeClick(data) {
            this.$emit('node-click', data);
        },
        handleDragStart(node, ev) {
            this.$emit('node-drag-start', node);
        },
        handleDragEnter(draggingNode, dropNode, ev) {
            this.$emit('node-drag-enter', draggingNode, dropNode, ev);
            console.log('tree drag enter: ', dropNode.label);
        },
        handleDragLeave(draggingNode, dropNode, ev) {
            this.$emit('node-drag-leave', draggingNode, dropNode, ev);
            console.log('tree drag leave: ', dropNode.label);
        },
        handleDragOver(draggingNode, dropNode, ev) {
            this.$emit('node-drag-over', draggingNode, dropNode, ev);
            console.log('tree drag over: ', dropNode.label);
        },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
                console.log('tree drag end: ', draggingNode, dropNode, dropType, ev);
                if (dropType !== 'none') {
                    var ter = this.getAllNodes(this.organizationUnits);
                    this.$emit('node-drag-end', ter);
                }
                if (dropType === 'inner') {
                    var ter = this.getAllNodes(this.organizationUnits);
                    this.$emit('node-drag-end', ter, draggingNode, dropNode);
                }
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
            this.$emit('node-drop', draggingNode, dropNode, dropType, ev);
            console.log('tree drop: ', dropNode.label, dropType);
        },
            allowDrop(draggingNode, dropNode, type) {
            // 拖动目标节点
                if (!!draggingNode.data.parentID) {
                    if (dropNode.data.parentID === draggingNode.data.parentID) {
                        return true;
                    }
                } else {
                    if (!dropNode.data.parentID) {
                        return true;
                    };
                }
        },
            allowDrag(draggingNode) {
                return true;
                // 只能拖动设备
                //if (!!draggingNode.data.beid) {
                //    return true;
                //}
        },
        dragenter(e, id) {
            this.selectTreeID = id;
            this.$emit('sendmsg', this.selectTreeID)
        },
        dragleave(e, id) {
            if (e.screenX !== 0 && e.screenY !== 0 && e.clientX !== 0 && e.clientY !== 0) {
                this.selectTreeID = '';
                this.$emit('sendmsg', this.selectTreeID)
            };
        },
        dragenter2(e) {
            this.orrTreeID = 1;
            this.$emit('sendmsg', this.orrTreeID)
        },
        dragleave2(e) {
            if (e.screenX !== 0 && e.screenY !== 0 && e.clientX !== 0 && e.clientY !== 0) {
                this.orrTreeID = 0;
                this.$emit('sendmsg', this.orrTreeID)
            };
        },
        showMenuItem(scope, item) {
            if (item.value === 'delete') {
                return true;
            } else if (item.value === 'edit') {
                //return !!scope.data.beid ? false : true;
                return true;
            } else if (item.value === 'create') {
                return !!scope.data.beid ? false : true;

                //var child = '';
                //if (scope.data.children) {
                //    child = scope.data.children.find(x => x.beid !== null);
                //};
                //return !!scope.data.beid || !!child ? false : true;
            };
        }
    },
    template: '#template'
};
</script>
